<template>
  <div class="content-card" @click="handleView">
    <!-- 内容图片 -->
    <div class="content-image">
      <img 
        v-if="content.first_image_url" 
        :src="content.first_image_url" 
        :alt="content.title"
        @error="handleImageError"
      />
      <div v-else class="no-image">
        <span class="no-image-icon">📷</span>
      </div>
      
      <!-- 内容类型标签 -->
      <div v-if="content.media_types && content.media_types.includes('video')" class="content-type">
        <span class="type-icon">▶️</span>
      </div>
    </div>

    <!-- 内容信息 -->
    <div class="content-info">
      <!-- 标题 -->
      <h3 class="content-title">{{ content.title }}</h3>
      
      <!-- 描述 -->
      <p v-if="content.description" class="content-description">
        {{ truncateText(content.description, 60) }}
      </p>
      
      <!-- 标签 -->
      <div v-if="content.tag_names && content.tag_names.length > 0" class="content-tags">
        <span 
          v-for="tag in content.tag_names.slice(0, 3)" 
          :key="tag" 
          class="tag"
        >
          #{{ tag }}
        </span>
      </div>
      
      <!-- 作者信息 -->
      <div class="author-info">
        <div class="author-avatar">
          <span class="avatar-icon">👤</span>
        </div>
        <div class="author-details">
          <span class="author-name">{{ content.author_nickname || '匿名用户' }}</span>
          <span class="publish-time">{{ formatTime(content.published_at) }}</span>
        </div>
      </div>
      
      <!-- 互动数据 -->
      <div class="interaction-stats">
        <div class="stat-item">
          <span class="stat-icon">👀</span>
          <span class="stat-count">{{ formatNumber(content.view_count) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">❤️</span>
          <span class="stat-count">{{ formatNumber(content.like_count) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">💬</span>
          <span class="stat-count">{{ formatNumber(content.comment_count) }}</span>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="content-actions">
      <button 
        class="action-btn like-btn" 
        :class="{ 'liked': isLiked }"
        @click.stop="handleLike"
      >
        <span class="action-icon">{{ isLiked ? '❤️' : '🤍' }}</span>
        <span class="action-text">{{ isLiked ? '已赞' : '点赞' }}</span>
      </button>
      
      <button class="action-btn share-btn" @click.stop="handleShare">
        <span class="action-icon">📤</span>
        <span class="action-text">分享</span>
      </button>
      
      <button class="action-btn collect-btn" @click.stop="handleCollect">
        <span class="action-icon">⭐</span>
        <span class="action-text">收藏</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
  content: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['view', 'like', 'share', 'collect'])

// 响应式数据
const isLiked = ref(false)
const isCollected = ref(false)

// 处理查看
const handleView = () => {
  emit('view', props.content)
}

// 处理点赞
const handleLike = () => {
  isLiked.value = !isLiked.value
  emit('like', props.content)
}

// 处理分享
const handleShare = () => {
  emit('share', props.content)
  
  // 尝试使用Web Share API
  if (navigator.share) {
    navigator.share({
      title: props.content.title,
      text: props.content.description,
      url: window.location.href
    }).catch(err => {
      console.log('分享失败:', err)
      // 降级到复制链接
      copyToClipboard(window.location.href)
    })
  } else {
    // 降级到复制链接
    copyToClipboard(window.location.href)
  }
}

// 处理收藏
const handleCollect = () => {
  isCollected.value = !isCollected.value
  emit('collect', props.content)
}

// 处理图片加载错误
const handleImageError = (event) => {
  event.target.style.display = 'none'
  event.target.nextElementSibling?.classList.add('show')
}

// 截断文本
const truncateText = (text, maxLength) => {
  if (!text) return ''
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

// 格式化数字
const formatNumber = (num) => {
  if (!num) return '0'
  if (num < 1000) return num.toString()
  if (num < 10000) return (num / 1000).toFixed(1) + 'k'
  if (num < 100000000) return (num / 10000).toFixed(1) + 'w'
  return (num / 100000000).toFixed(1) + '亿'
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  
  const now = new Date()
  const time = new Date(timeStr)
  const diff = now - time
  
  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour
  const week = 7 * day
  const month = 30 * day
  
  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return Math.floor(diff / minute) + '分钟前'
  } else if (diff < day) {
    return Math.floor(diff / hour) + '小时前'
  } else if (diff < week) {
    return Math.floor(diff / day) + '天前'
  } else if (diff < month) {
    return Math.floor(diff / week) + '周前'
  } else {
    return time.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  }
}

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    // 可以添加提示
    console.log('链接已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
  }
}
</script>

<style scoped>
.content-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 内容图片 */
.content-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.content-card:hover .content-image img {
  transform: scale(1.05);
}

.no-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-image-icon {
  font-size: 48px;
  opacity: 0.5;
}

.content-type {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.type-icon {
  font-size: 14px;
}

/* 内容信息 */
.content-info {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-description {
  font-size: 13px;
  color: #666;
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag {
  background: #f8f9fa;
  color: #ff2442;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 16px;
  color: #666;
}

.author-details {
  flex: 1;
  min-width: 0;
}

.author-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-time {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* 互动数据 */
.interaction-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-icon {
  font-size: 14px;
}

.stat-count {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* 操作按钮 */
.content-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px 14px;
  margin-top: auto;
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid #e9ecef;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  color: #666;
}

.action-btn:hover {
  background: #f8f9fa;
  border-color: #ff2442;
  color: #ff2442;
}

.action-btn.liked {
  background: #fff5f5;
  border-color: #ff2442;
  color: #ff2442;
}

.action-icon {
  font-size: 16px;
}

.action-text {
  font-size: 11px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-image {
    height: 180px;
  }
  
  .content-info {
    padding: 12px;
  }
  
  .content-title {
    font-size: 15px;
  }
  
  .content-description {
    font-size: 13px;
  }
  
  .content-actions {
    padding: 0 12px 12px 12px;
  }
  
  .action-btn {
    padding: 6px;
  }
  
  .action-icon {
    font-size: 14px;
  }
  
  .action-text {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .content-image {
    height: 160px;
  }
  
  .content-info {
    padding: 10px;
  }
  
  .content-title {
    font-size: 14px;
  }
  
  .interaction-stats {
    gap: 12px;
  }
  
  .stat-item {
    gap: 2px;
  }
  
  .stat-icon {
    font-size: 12px;
  }
  
  .stat-count {
    font-size: 11px;
  }
}
</style>
